<template>
  <mt-popup v-model="popupVisible" position="right" class="sendDetails" :modal="false">
    <div class="page sendDetails">
      <div class="scroll-view">
        <customHeader middleTitle="短信详情" @leftCallBack="popupHide"></customHeader>
        <StoreDetails :reqParams="reqParams" :statusFilter="true" ref="StoreDetails"></StoreDetails>
        <div class="page-body">
          <div class="top-info">
            <div class="title">自定义短信</div>
            <div class="status">{{sendStatusFormate(item.sendStatus)}}</div>
            <ul>
              <li v-if="item.sendStatus == 4">
                <span>失败原因</span>
                <div class="red">{{item.failReason}}</div>
              </li>
              <li>
                <span>创建时间</span>
                <div>{{dateFormate(item.createTime)}}</div>
              </li>
              <li>
                <span>最后编辑时间</span>
                <div>{{dateFormate(item.updateTime)}}</div>
              </li>
              <li>
                <span>最后编辑人</span>
                <div>{{item.lastOpName}}</div>
              </li>
            </ul>
          </div>
          <div class="bottom">
            <div class="title">短信详情</div>
            <ul class="bottom-info">
              <li @click="showStoreList">
                <span>门店</span>
                <div>
                  {{shopFormate(item.shopList)}}
                  <i class="zhk-list_rarrow"></i>
                </div>
              </li>
              <li>
                <span>会员来源</span>
                <div>{{memberFormate(item.memberSource) }}</div>
              </li>
              <li>
                <span>性别</span>
                <div>{{genderFormate(item.gender) }}</div>
              </li>
              <li>
                <span>触达人数</span>
                <div>{{item.memberCount }}</div>
              </li>
              <li>
                <span>发送条数</span>
                <div>{{sendCount(item)}}</div>
              </li>
              <li>
                <span>发送时间</span>
                <div>{{dateFormate(item.sendTime) }}</div>
              </li>
              <li>
                <span>短信字数</span>
                <div>{{item.msgAllContent?item.msgAllContent.length:"" }}</div>
              </li>
              <li>
                <span>签名</span>
                <div>{{item.signContent }}</div>
              </li>
              <li>
                <span>短信内容</span>
                <div>
                  <div class="btn-copy" @click="doCopy(item.msgAllContent)">复制</div>
                </div>
              </li>
              <div class="msg-content">{{item.msgAllContent}}</div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import StoreDetails from "../../components/StoreChoice/StoreDetails";
import { Toast } from "mint-ui";
import moment from "moment";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);
export default {
  name: "sendDetails",
  data() {
    return {
      reqParams: { url: "/newapp/smsmarketing/getMsgDetailShopList.do", type: "post", data: { shopList: [] } },//门店详情列表请求参数
      popupVisible: false,
      item: { gender: [], memberSource: [], shopList: [] }
    };
  },
  props: {
    msgId: {
      type: String
    }
  },
  methods: {
    sendCount(item) {
      if (item.sendStatus == 3) {
        if(item.recSucCount){
          return item.recSucCount
        }else{
          return item.sendCount;
        }
      }
      else {
        return item.memberCount * item.splitCount;
      }
    },
    showStoreList() {
      this.$refs.StoreDetails.popupShow();
    },
    doCopy(content) {
      if (!content) {
        return;
      }
      this.$copyText(content).then(
        e => {
          Toast("复制成功");
        },
        e => {
          Toast("当前手机版本不支持，请长按手动复制。");
        }
      );
    },
    shopFormate(shopList) {
      if (shopList && shopList.length > 1) {
        return "已选" + shopList.length + "家门店";
      } else if (shopList && shopList.length === 1) {
        return this.item.shopName;
      } else {
        return "全部";
      }
    },
    dateFormate(date) {
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss');
      } else {
        return date;
      }
    },
    sendStatusFormate(sendStatus) {
      let v = "";
      if (sendStatus == 0) {
        v = "已取消";
      } else if (sendStatus == 1) {
        v = "待发送";
      } else if (sendStatus == 2) {
        v = "发送中";
      } else if (sendStatus == 3) {
        v = "发送成功";
      } else if (sendStatus == 4) {
        v = "发送失败";
      }
      return v;
    },
    memberFormate(member) {
      let m = "";
      if (!member || JSON.stringify(member) == "[]") {
        m = "全部";
      }
      else if (member[0] === "1") {
        m = "支付宝";
      } else if (member[0] === "2") {
        m = "微信";
      } else if (member[0] === "3") {
        m = "线下导入";
      }
      return m;
    },
    genderFormate(gender) {
      let g = "";
      if (gender == null || undefined == gender || JSON.stringify(gender) == "[]") {
        g = "全部";
      }
      else if (gender[0] === 1) {
        g = "男";
      } else if (gender[0] === 2) {
        g = "女";
      } else if (gender[0] === 0) {
        g = "未知";
      }
      return g;
    },
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    loadDetails() {
      this.ajax({
        url: `/newapp/smsmarketing/getMsgDetail.do?msgId=${this.msgId}`,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            this.item = res.resultObject;
            if (res.resultObject && res.resultObject.tagContent) {
              const tagContent = JSON.parse(res.resultObject.tagContent);
              this.item.shopList = tagContent.shopList;
              this.item.shopName = tagContent["shopName"] ? tagContent["shopName"] : "";
              this.item.memberSource = tagContent.memberSource;
              this.item.gender = tagContent.genderList;
              this.item.msgAllContent = `${res.resultObject.msgContent} 退订回T【${res.resultObject.signContent}】`
              this.reqParams.data.shopList = tagContent.shopList.map((item) => { return item.shopId });
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch((err) => {

        });
    },
  },

  created() {
  },
  components: {
    customHeader,
    StoreDetails
  },
  watch: {
    popupVisible(newV, oldV) {
      if (newV) {
        this.loadDetails();
      }
    }
  }
};
</script>
<style lang='scss' scoped>
@import "messageMarketing";
</style>
